<template>
  <div class="home">
    <div class="top">
      <van-icon name="location" color="white" size="20" />
      <van-search
        v-model="value"
        shape="round"
        background="#0eb6ff"
        placeholder="请输入搜索关键词"
        @focus="infoSearch"
      />
      <van-icon name="scan" size="20" color="white" />
      <van-icon name="chat-o" size="20" color="white" />
    </div>
    <div class="img-radius">
      <ul class="container">
        <li v-for="item in classlist" :key="item.id">
          <router-link :to="{ name: 'List' }" style="color: black">
            <p class="icon">
              <!-- <van-icon name="fire-o" size="26" color="white" /> -->
              <van-image
                round
                width="60px"
                height="60px"
                :src="item.coverImage | dalImg"
              />
            </p>
            <p style="text-align: center; font-size: 12px">{{ item.name }}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="apple">
      <div class="app-top">
        <van-divider><b style="color: black">超划算</b></van-divider>
        <van-divider style="color: black">更多</van-divider>
      </div>
      <div class="apple-mian">
        <div class="app-auto">
          <router-link
            :to="{ name: 'Detail', params: { id: item.id } }"
            class="ap-item"
            v-for="item in list"
            :key="item.id"
            style="color: black"
          >
            <van-image fit="cover" :src="item.coverImage | dalImg" />
            <p>{{ item.name }}</p>
            <p>
              <span style="margin-right: 10px"
                ><span style="color: red">￥{{ item.price }}</span
                >/箱</span
              >
              <span class="cart"
                ><van-icon name="shopping-cart-o" color="white" />
              </span>
            </p>
          </router-link>
        </div>
      </div>
    </div>

    <div class="Origin">
      <div class="van-hairline--right eat-img" v-for="item in 2" :key="item">
        <p style="font-weight: 700">吃好点</p>
        <p>美国大罂粟尝鲜</p>
        <div class="pic">
          <van-image
            v-for="item in 2"
            :key="item"
            width="4rem"
            height="4rem"
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
      </div>
    </div>
    <div class="tabCation">
      <van-tabs @click="onChange">
        <van-tab v-for="item in classlist" :key="item.id" :title="item.name" />
      </van-tabs>
    </div>
    <div class="listcart">
      <van-card
        v-for="item in products"
        :key="item.id"
        :price="item.price.toFixed(2)"
        :title="item.name"
        :thumb="item.coverImage | dalImg"
        @click-thumb="Detail(item)"
      >
        <template #tags>
          <van-tag plain type="danger" class="tags"> 特价</van-tag>
          <van-tag plain type="danger"
            ><span style="color: gray">24H发货</span></van-tag
          >
        </template>

        <template #bottom>
          <p>888人已买</p>
        </template>
        <template #footer>
          <span
            style="
              background-color: #0eb6ff;
              display: inline-block;
              width: 20px;
              height: 20px;
              border-radius: 20px;
              text-align: center;
              margin-bottom: -20px;
            "
            ><van-icon
              name="shopping-cart-o"
              size="16"
              color="white"
              @click="addCartQuickly(item.id)"
          /></span>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { loadCategoriesAPI } from "../services/categories";
import { loadProductsAPI } from "../services/products";
import { addCartAPI } from "../services/carts";
import { Toast } from "vant";
import { getToken } from "../Uitils/auth";

export default {
  name: "HomeView",
  data() {
    return {
      value: "",
      classlist: [],
      list: [],
      products: [],
    };
  },
  created() {
    loadCategoriesAPI().then((res) => {
      console.log(res.data);
      this.classlist = res.data;
    });
    loadProductsAPI().then((res) => {
      console.log(res.data);
      this.list = res.data;
    });
    this.loadCategories().then((data) => {
      console.log(data);
      this.loadProducts(data.data[0].id);
    });
  },

  methods: {
    Detail(item) {
      this.$router.push({
        name: "Detail",
        params: {
          id: item.id,
          name: item.name,
        },
      });
    },
    async loadProducts(id) {
      const res = await loadProductsAPI(id);
      console.log(res);
      this.products = [...res.data];
    },
    async loadCategories() {
      const res = await loadCategoriesAPI();
      console.log(res.data);
      return res;
    },
    onChange(title) {
      console.log(title);
      // let index = this.classlist.findIndex((v) => v.id == id);
      // console.log(index);
      // this.activeKey = index;
      // this.loadProducts(id);
      this.loadProducts(this.classlist[title].id);
    },
    infoSearch() {
      this.$router.push({
        name: "Search",
      });
    },
    addCartQuickly(id) {
      if (getToken()) {
        addCartAPI(id, 1).then((res) => {
          console.log(res);
          Toast(res.msg);
        });
      } else {
        Toast("请先登录");
        this.$router.push({
          name: "Login",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #f5f5f5;
}
.top {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #0eb6ff;
}
.apple {
  margin-top: 40px;
  width: 96vw;
  // overflow: auto;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}
.app-top {
  height: 30px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.apple-mian {
  overflow: auto;
}
.app-auto {
  // width: 200%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .ap-item {
    width: 120px;
    padding: 10px;
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cart {
      display: inline-block;
      text-align: center;
      width: 20px;
      height: 20px;
      border-radius: 30px;
      background-color: #0eb6ff;
    }
  }
}
.img-radius {
  overflow: auto;
}
.container {
  padding: 8px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  li {
    padding: 8px;
  }
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #f8ceb4;
}

.tags {
  margin-top: 20px;
}
.Origin {
  padding: 10px;
  width: 95vw;
  background-color: #fff;
  border-radius: 10px;
  margin: auto;
  margin-bottom: 10px;
  display: flex;
  // justify-content: space-between;
  .eat-img {
    padding: 10px;
    width: 50%;
  }
  .pic {
    padding: 10px;
    display: flex;
    justify-content: space-around;
  }
}
.tabCation {
  padding: 10px;
}
</style>
